Haeyul Blog

009. [Android] GpsStatusBadge 만들어 보기

2 min read

배경

해당 글은 Inflearn에 있는 [Android 고급] 백그라운드 서비스 끝판왕 – Flavor 설정부터 MVI 아키텍처까지라는 강의에 Section2에 GpsStatusBadge 컴포넌트 UI 구현이라는 강좌를 보고 추가적으로 자료를 찾아 정리한 글입니다.

전체 코드 및 결과물

사진과 같이 상태를 보여주는 뱃지를 만들어 실제 러닝 앱에서 상태가 상황에 따라 자동으로 변환되는 기능의 UI를 만들어 보겠습니다.

@Composable  
fun GpsStatusBadge(  
    modifier: Modifier = Modifier,  
    status: GpsStatus,  
    onClick : (() -> Unit)? = null,  
) {  
    val color: Color  
    val text: String  
    val icon: ImageVector  
  
    when(status) {  
        GpsStatus.Disabled -> {  
            color = AppTheme.colors.secondaryText  
            text = "GPS Disabled"  
            icon = Icons.Default.Block  
        }  
  
        GpsStatus.Acquired -> {  
            color = AppTheme.colors.warning  
            text = "Searching GPS..."  
            icon = Icons.Default.Refresh  
        }  
  
        GpsStatus.Enabled -> {  
            color = AppTheme.colors.success  
            text = "GPS Connected"  
            icon = Icons.Default.Map  
        }  
  
        GpsStatus.Lost -> {  
            color = AppTheme.colors.error  
            text = "GPS Lost"  
            icon = Icons.Default.LegendToggle  
        }  
    }  
  
    Surface(  
        shape = RoundedCornerShape(12.dp),  
        color = color.copy(alpha = 0.9f),  
        contentColor = Color.White,  
        modifier = modifier.then(  
            if(onClick != null) {  
                Modifier.clickable {onClick()}  
            } else {  
                Modifier            }        )  
    ) {  
        Row(  
            modifier = Modifier.padding(  
                horizontal = 8.dp,  
                vertical = 4.dp  
            )  
        ) {  
            Icon(  
                imageVector = icon,  
                contentDescription = null,  
                modifier = Modifier.size(14.dp)  
            )  
            Text(  
                text = text,  
                style = AppTheme.typography.caption,  
                fontWeight = FontWeight.Bold  
            )  
        }  
    }}  
  
@Preview(showBackground = true)  
@Composable  
private fun GpsStatusBadgePreview() {  
    Column(  
        modifier = Modifier.padding(16.dp),  
        verticalArrangement = Arrangement.spacedBy(8.dp)  
    ) {  
        GpsStatusBadge(status = GpsStatus.Lost)  
        GpsStatusBadge(status = GpsStatus.Enabled)  
        GpsStatusBadge(status = GpsStatus.Disabled)  
        GpsStatusBadge(status = GpsStatus.Acquired)  
    }  
}

Composable 만들기

UI 개발에 있어서 제일 먼저 해야 할 것은 Composable 인 것 같습니다. Composable에 대해서 궁금하신 분들은 해당 글을 읽고 와주세요

Graph View